<template>
  <!-- 雷达图  图表必须给高和宽度-->
  <div ref="aw" class="aaa" style="width: 37.5rem ; height: 100%" />
</template>

<script>
// 完成加载过程
var echarts = require('echarts')

export default {
  // 页面渲染完毕事件
  mounted() {
    const myChart = echarts.init(this.$refs.aw) // 得到图表实例
    myChart.setOption({
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      legend: {
        data: [
          '直达',
          '营销广告',
          '搜索引擎',
          '邮件营销',
          '联盟广告',
          '视频广告',
          '百度',
          '谷歌',
          '必应',
          '其他'
        ]
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          selectedMode: 'single',
          radius: [0, '30%'],
          label: {
            position: 'inner',
            fontSize: 14
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 1548, name: '搜索引擎' },
            { value: 775, name: '直达' },
            { value: 679, name: '营销广告', selected: true }
          ]
        },
        {
          name: 'Access From',
          type: 'pie',
          radius: ['45%', '60%'],
          labelLine: {
            length: 30
          },
          label: {
            formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
            backgroundColor: '#F6F8FC',
            borderColor: '#8C8D8E',
            borderWidth: 1,
            borderRadius: 4,
            rich: {
              a: {
                color: '#6E7079',
                lineHeight: 22,
                align: 'center'
              },
              hr: {
                borderColor: '#8C8D8E',
                width: '100%',
                borderWidth: 1,
                height: 0
              },
              b: {
                color: '#4C5058',
                fontSize: 14,
                fontWeight: 'bold',
                lineHeight: 33
              },
              per: {
                color: '#fff',
                backgroundColor: '#4C5058',
                padding: [3, 4],
                borderRadius: 4
              }
            }
          },
          data: [
            { value: 1048, name: '百度' },
            { value: 335, name: '直达' },
            { value: 310, name: '邮件营销' },
            { value: 251, name: '谷歌' },
            { value: 234, name: '联盟广告' },
            { value: 147, name: '必应' },
            { value: 135, name: '视频广告' },
            { value: 102, name: '其他' }
          ]
        }
      ]
    })
  }
}
</script>
<style>
.aaa {
  margin: 0 auto;
}
canvas {
  width: 37.5rem;
}
</style>
